<template>
  <view class="login-container">
    <view class="header">
      <uni-icons type="spinner-cycle" size="64" color="#FFFFFF"></uni-icons>
      <text class="title">青岛海洋志愿者系统</text>
      <view class="title-line"></view>
    </view>

    <view class="form-container">
      <view class="form-item">
        <uni-icons type="person" size="24" color="#1976D2"></uni-icons>
        <input
          type="number"
          v-model="phone"
          placeholder="请输入手机号"
          maxlength="11"
          class="input-field"
        />
      </view>
      <text v-if="phoneError" class="error-text">请输入正确的手机号</text>

      <view class="form-item">
        <uni-icons type="locked" size="24" color="#1976D2"></uni-icons>
        <input
          :type="showPassword ? 'text' : 'password'"
          v-model="password"
          placeholder="请输入密码"
          class="input-field"
        />
        <uni-icons
          :type="showPassword ? 'eye' : 'eye-slash'"
          size="24"
          color="#1976D2"
          @click="togglePassword"
        ></uni-icons>
      </view>
      <text v-if="passwordError" class="error-text">密码不能为空</text>

      <button class="login-button" @click="handleLogin">登录</button>

      <view class="no-account-link" @click="handleRegister">
        <text>未有账号，立即注册</text>
      </view>
    </view>

    
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { request, uploadFile } from '@/utiles/request';

const phone = ref('');
const password = ref('');
const showPassword = ref(false);
const phoneError = ref(false);
const passwordError = ref(false);

const validatePhone = () => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  phoneError.value = !phoneRegex.test(phone.value);
  return !phoneError.value;
};

const validatePassword = () => {
  passwordError.value = !password.value;
  return !passwordError.value;
};

const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

const handleLogin = () => {
  const isPhoneValid = validatePhone();
  const isPasswordValid = validatePassword();
  
  if (isPhoneValid && isPasswordValid) {
    uni.showLoading({
      title: '登录中...'
    });
    
    request({
      url: '/admin/api/user/login',
      method: 'POST',
      data: {
        phone: phone.value,
        password: password.value
      }
    }).then(res => {
      uni.hideLoading();
      if (res.data && res.data.code === 200) {
        // 保存用户信息和token到本地
        uni.setStorageSync('userInfo', res.data.data.userInfo);
        uni.setStorageSync('token', res.data.data.token);
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
        
        // 跳转到tabBar的index页面
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          });
        }, 1200);
      } else {
        uni.showToast({
          title: res.data?.msg || '登录失败',
          icon: 'none'
        });
      }
    }).catch(() => {
      uni.hideLoading();
      uni.showToast({
        title: '网络错误',
        icon: 'none'
      });
    });
  }
};

const handleRegister = () => {
  uni.navigateTo({
    url: '/pages/register/register'
  });
};

onMounted(() => {
  const userInfo = uni.getStorageSync('userInfo');
  if (userInfo) {
    uni.showModal({
      title: '提示',
      content: '您已登录，点击确定进入首页',
      showCancel: false,
      success: () => {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }
    });
  }
});
</script>

<style>
page {
  height: 100%;
}

.login-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 48rpx;
  background: linear-gradient(180deg, #E3F2FD 0%, #1976D2 100%);
}

.header {
  margin-top: 160rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
}

.title {
  color: #FFFFFF;
  font-size: 48rpx;
  font-weight: 500;
  margin-top: 32rpx;
}

.title-line {
  width: 120rpx;
  height: 4rpx;
  background-color: #FFFFFF;
  margin-top: 16rpx;
}

.form-container {
  width: 90%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10rpx;
  padding: 48rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  display: flex;
  align-items: center;
  height: 96rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
  padding: 0 32rpx;
  margin-bottom: 24rpx;
  border: 2rpx solid #E0E0E0;
}

.input-field {
  flex: 1;
  height: 96rpx;
  margin-left: 24rpx;
  font-size: 28rpx;
}

.error-text {
  color: #FF5252;
  font-size: 24rpx;
  margin-bottom: 24rpx;
  padding-left: 32rpx;
}

.login-button {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(90deg, #2196F3 0%, #1565C0 100%);
  border-radius: 48rpx;
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: 500;
  margin-top: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.register-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32rpx;
  color: rgba(255, 255, 255, 0.8);
  font-size: 28rpx;
}

.register-link text {
  margin-right: 8rpx;
  text-decoration: underline;
}

.no-account-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32rpx;
  color: #1976D2;
  font-size: 28rpx;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
</style>

